<template>
  <el-container>
    <el-header>
      <Header @header-clicked="handleHeaderClick"></Header>
    </el-header>
    <el-container>
      <el-aside v-show="isShow" class="aside-container">
        <Aside @menu-clicked="handleMenuClick" :defaultActiveId="selectId"></Aside>
      </el-aside>
      <div v-if="isShow">
        <div class="hide-icon-btn" @click="isShow = !isShow">
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </div>
      <div v-else>
        <div class="hide-icon-btn-hide-left" @click="isShow = !isShow">
          <span>目录</span>
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </div>
      <el-main :style="mainStyle">
        <Chapter :selectId="selectId" @page-clicked="handlePageClick"></Chapter>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from '@/views/help-document/components/Header.vue'
import Aside from '@/views/help-document/components/Aside.vue'
import Chapter from "@/views/help-document/components/Chapter.vue";
import {getChapter} from "@/api/helpDocument";
export default {
  name: 'HelpPage',
  data() {
    return {
      isShow: true,
      selectId: 0,
    }
  },
  mounted() {

  },
  created() {
    if (this.$route.query.selectId > 0) {
      this.selectId = this.$route.query.selectId;
    }
  },
  methods: {
    handleMenuClick(id) {
      this.selectId = id;
    },
    handlePageClick(id) {
      this.selectId = id;

    },
    handleHeaderClick(id) {
      this.selectId = id;
    },

  },

  components: {
    Header,
    Aside,
    Chapter,
  },
  computed: {
    mainStyle() {
      return {
        marginLeft: this.isShow ? '0' : '50px'
      };
    }
  }
}
</script>

<style scoped lang="scss">
.el-container {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
}

.el-aside {
  overflow: hidden;
  background-color: white;
  color: #333;
}

.el-main {
  padding: 0;
  background-color: white;
  color: #333;
  overflow: hidden;
}

.hide-icon-btn-hide-left,
.hide-icon-btn {
  position: fixed; /* 改为 fixed 定位 */
  z-index: 1;
  background-color: white;
  border: 1px solid #ccc;
}

.hide-icon-btn-hide-left {
  writing-mode: vertical-rl;
  top: 20%;
  left: 0px;
  padding: 5px;
  border-radius: 0 8px 8px 0;
}

.hide-icon-btn {
  top: 15%;
  left: 260px;
  padding: 7px;
  border-radius: 50%;
}
</style>
